<template>
	<view class="content">
		<view class="sercah_mater">
			<view class="sercah_ipt">
				<u-icon color="#999999" size="28" name="search" style="margin-right: 16rpx"></u-icon>
				<u-input height="40rpx" v-model="materialName"  :type="type" @input="searchFn" input-align="left" placeholder-style="fontSize:28rpx;color: #999999;"
				 placeholder="请输入物资名称" />
			</view>
			<text @click="closeSelctFn">取消</text>
		</view>
		<view class="mater_con">
			<mescroll-body class="water_scroll" ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback"
			 @up="upCallback">
				<view class="mater_list" v-for="(item, index) in materList" :key="index" @click="goDuildInfo(item)">
					<view class="mater_intro">
						<view class="intro">
							<text>{{ item.materialName }}</text>
							<text v-for="(item1,index1) in dictList"  :key="index1" v-if="item1.dictValue==item.unit">单位 ({{ item1.dictLabel }})</text>
						</view>
					</view>
					<view class="mater_title">
						<view class="intro">
							<text>库存数量</text>
							<text>{{ item.quantity }}</text>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				materList: [],
				materialName: "",
				houseId: "",

				downOption: {
					page: {
						num: 0,
						size: 10,
						time: null,
					},
					auto: false, //是否在初始化后,自动执行downCallback; 默认true
				},
				dictList: []
			};
		},
		onLoad(option) {
			this.houseId = option.houseId;
			this.getDict()
			this.getTitle(option.name);
		},
		methods: {
			getDict() {
				//联网加载数据
				this.apis.commonApi
					.getDict("unit_type")
					.then((res) => {
						this.dictList = res.data;
						console.log(this.dictList)
					})
					.catch(() => {
						//联网失败的回调,隐藏下拉刷新的状态
					});
			},
			getTitle(title) {
				uni.setNavigationBarTitle({
					title: title,
				});
			},
			goDuildInfo(row) {
				// console.log("row.materialId",row.materialId);
				// uni.navigateTo({
				// 	url: "./materInfo?name=" + row.materialName + "&id=" + row.materialId,
				// });
			},

			// 搜索物资
			searchFn(e) {
				this.materList = [];
				this.materialName = e;
				clearTimeout(this.searchTimout);
				this.searchTimout = setTimeout(() => {
					this.mescroll.resetUpScroll();
				}, 1000);
			},
			closeSelctFn() {
				this.materialName = '';
				this.materList = [];
					this.mescroll.resetUpScroll();
			},
			/*下拉刷新的回调 */
			downCallback(page) {
				this.materList = [];
				this.mescroll.resetUpScroll();
				// let that = this;
				// //联网加载数据
				// this.apis.materialsApi
				// 	.maMaterialListByWarehouse({
				// 		pageNum: page.num,
				// 		pageSize: page.size,
				// 		houseId: this.houseId,
				// 		materialName: this.materialName,
				// 	})
				// 	.then((res) => {
				// 		res.rows.forEach((item) => {
				// 			that.dictList.forEach((itemType) => {
				// 				if (itemType.dictValue == item.unit) {
				// 					item.unitName = itemType.dictLabel;
				// 				}
				// 			});
				// 		});
				// 		this.materList = res.rows;
				// 		this.mescroll.endBySize(res.rows.length, res.total);
				// 	})
				// 	.catch(() => {
				// 		//联网失败的回调,隐藏下拉刷新的状态
				// 		this.mescroll.endErr();
				// 	});
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				this.apis.materialsApi
					.maMaterialListByWarehouse({
						pageNum: page.num,
						pageSize: page.size,
						houseId: this.houseId,
						materialName: this.materialName,
					})
					.then((res) => {
						this.materList = this.materList.concat(res.rows);
						this.mescroll.endBySize(res.rows.length, res.total);
					})
					.catch(() => {
						//联网失败的回调,隐藏下拉刷新的状态
						this.mescroll.endErr();
					});
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		padding: 0;
	}

	.content {
		.sercah_mater {
			background: #ffffff;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.sercah_ipt {
				width: 85%;
				background: #f5f5f5;
				display: flex;
				justify-content: flex-start;
				border-radius: 12rpx;
				padding-left: 20rpx;
				padding: 16rpx 0 16rpx 20rpx;
				margin-right: 20rpx;
			}
			/deep/ .u-input{
				width: 100%;
			}
			text {
				display: block;
				width: 56rpx;
				font-size: 28rpx;
				color: #666666;
			}
		}

		.mater_con {
			overflow-y: auto;
			height: 1160rpx;
			margin: 20rpx 20rpx 0 20rpx;
		}

		.mater_list {
			padding: 24rpx 30rpx;
			box-sizing: border-box;
			background: #ffffff;
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;
			border-radius: 12rpx;

			.mater_intro,
			.mater_title {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.intro {
					display: flex;
					font-size: 28rpx;
					justify-content: space-between;

					text:nth-child(2) {
						color: #333333;
						font-size: 26rpx;
					}
				}
			}

			.mater_intro {
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #eeeeee;
			}

			.mater_title {
				padding-top: 20rpx;

				.intro {
					font-size: 26rpx;
					color: #999999;
				}
			}
		}
	}
</style>
